<template>
	<view>
		<view class="page_bg">
			<image class="bg_img" src="./static/qiang_bg.png" mode="aspectFill"></image>
			<view class="qiang_img">
				<image src="./static/qiang_en.png" mode="widthFix"></image>
				<view class="post_cont">
					<view class="nick_name">{{ detailForm.nickname }}</view>
					<view class="tip">给你发了一个红包</view>
				</view>
			</view>
		</view>
		<view class="option_main">
			<view class="btn" @click="grabEnveple" v-if="receiveForm.fk_receive_id > 0">
				{{ detailForm.type > 2 ? (receiveForm.num > 0 ? '使用红包' : '已使用') : '查看红包' }}
			</view>
			<view class="btn" @click="grabEnveple" v-else>{{ detailForm.inventory_quantity > 0 ? '马上抢' : '已抢完' }}</view>
			<view class="record_tip" @click="seeReceiveList">查看领取记录</view>
		</view>

		<u-popup v-model="envelopeVisible" mode="center" contBg="transparent">
			<view class="en_bg">
				<image class="en_bg_img" mode="aspectFit" src="./static/open_en.png"></image>
				<view class="open_top">
					<view class="en_title">
						<view class="title_txt u-line-1">{{ detailForm.name }}</view>
					</view>
					<view class="open_prod" v-if="detailForm.type == 1">
						<view class="prod_img"><image :src="prodForm.logo"></image></view>
						<view class="prod_cont">
							<view class="prod_name uj-line-3">{{ prodForm.name }}</view>
							<view class="en_num">x{{ receiveForm.num }}</view>
						</view>
					</view>	
					<view class="open_coupon" v-else-if="detailForm.type == 2">
						<view class="price_box">
							<text class="num">{{ $price(couponForm.price) }}</text>
							<text class="sign">元</text>
						</view>
						<view class="condition">-满{{ $price(couponForm.full_reduce) }}元可用-</view>
					</view>
				</view>

				<view class="open_bot">
					<view class="time" v-if="detailForm.type == 2">
						到期：{{ (couponForm.coupon_receive_status == 1 ? couponForm.coupon_receive_effective : couponForm.end_effective) | formatTime }}
					</view>
					<view class="btn" v-if="detailForm.type == 1" @click="optionEnve">{{ isShare ? '我的红包' : receiveForm.num > 0 ? '立即兑换' : '已使用' }}</view>
					<view class="btn" v-else-if="detailForm.type == 2" @click="optionEnve">
						{{ isShare ? '我的红包' : couponForm.nearly == 2 ? '已过期' : couponForm.coupon_receive_status == 1 ? '已使用' : '立即兑换' }}
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="receiveVisible" mode="bottom" border-radius="20">
			<view class="record_main" v-if="dataListParams.init">
				<view class="rece_head">
					<view class="head_title">已领取红包：{{ dataList.length }}/{{ Math.ceil(detailForm.num / detailForm.relay_num) }}</view>
				</view>
				<view class="no_record" v-if="dataList.length <= 0">还没有人领取哦~~</view>
				<scroll-view scroll-y class="scroll_view">
					<view class="rece_item" v-for="(item, index) in dataList" :key="index">
						<view class="img"><image :src="item.headimgurl"></image></view>
						<view class="rece_cont">
							<view class="rece_top">
								<view class="user_name">{{ item.nickname }}</view>
								<view class="time">{{ item.date_creation | formatTime() }}</view>
							</view>
							<view class="en_name u-line-2">{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<sww-login></sww-login>
	</view>
</template>

<script>
import { pagingMixin } from '@/mixins/pagingMixin.js';
import { formatDate } from '@/utils/moment/index.js';
import { uniModal } from '@/utils/uniPromise';
import { useEnvelope } from './useEnvelope.js';
import { balance } from '@/mixins/balance.js';
export default {
	mixins: [pagingMixin, useEnvelope, balance],
	components: {},
	filters: {
		formatTime(val) {
			return formatDate(val, 'YYYY-MM-DD HH:mm:ss');
		}
	},
	data() {
		return {
			isShare: true,
			detailForm: {},
			receiveForm: {
				already_received: 0, // 是否被领取
				fk_receive_id: 0, // 领取的id
				num: 0 // 领取数量
			}, // 领取信息
			typeOption: {
				1: '产品兑换券',
				2: '优惠券',
				3: '积分',
				4: '余额'
			},
			recordId: 0,
			envelopeVisible: false, // 红包内容弹窗
			receiveVisible: false, // 记录列表弹窗
			dataList: [], // 记录列表
			prodForm: {}, // 产品信息
			orderProdObj: {},
			init: false,
			couponForm: {}
		};
	},
	onLoad(options) {
		if (options && options.id) {
			console.log('op',options)
			this.recordId = Number(options.id);
			// 记录id
			this.$loading();
			this.$login('pageInit').then(() => {
				this.pageInit();
			});
		}
		if (options && options.no_share) {
			this.isShare = false;
		}
	},
	onShow() {
		if (this.init) {
			this.$loading();
			this.$login('pageInit').then(() => {
				this.pageInit();
			});
		} else {
			this.init = true;
		}
	},
	methods: {
		// 查询红包详情、是否领取
		pageInit(showPopup) {
			this.$resPost('GetRedEnvelopesRecordItem', { pk_id: this.recordId }).then(({ data }) => {
				this.receiveForm = data.recevie_status && data.recevie_status[0] ? { ...data.recevie_status[0] } : {};
				this.detailForm = {
					...data,
					recevie_status: null
				};
				this.getRelation();
				this.$hide();
				if (showPopup && (this.detailForm.type == 1 || this.detailForm.type == 2)) {
					this.envelopeVisible = true;
				}
			});
		},
		// 获取关联的数据
		getRelation() {
			if (this.detailForm.type == 1) {
				// 产品
				this.$resPost('GetProductDetailed', {
					pk_id: this.detailForm.fk_pro_id
				})
					.then(({ data }) => {
						if (!data.pk_id || !data.product_stock[0] || data.is_online != 1 || data.status != 1) {
							return Promise.reject();
						}
						this.prodForm = {
							...data
						};
					})
					.catch(() => {
						uniModal({
							title: '商品已下架',
							showCancel: false,
							confirmText: '我知道了'
						});
					});
			} else if (this.detailForm.type == 2) {
				// 优惠券
				this.getCouponInfo(this.detailForm.fk_pro_id).then(obj => {
					this.couponForm = {
						...obj
					};
				});
			}
		},
		// 获取领取记录
		initReceiveList() {
			this._init_data('GetEnvelopesReceiveList', { pk_id: this.recordId },{loading:true});
		},
		// 点击红包
		grabEnveple() {
			this.$login('pageInit').then(() => {
				if(this.vuex_user.pk_id == this.detailForm.fk_users_id){
					// 自己不能领取红包
					uni.showModal({
						title:'不能领取自己的红包',
						showCancel:false
					})
					return
				}
				if (!this.receiveForm.fk_receive_id) {
					if (this.detailForm.inventory_quantity > 0) {
						// 未领取,取领取
						this.goReceive();
					}
				} else {
					// 已领取过了,去使用
					if (this.detailForm.type == 1 || this.detailForm.type == 2) {
						this.envelopeVisible = true;
					} else if (this.detailForm.type == 3) {
						this.receiveIntegral(this.detailForm.price * this.receiveForm.num, this.receiveForm.num, this.receiveForm.fk_receive_id);
					} else if (this.detailForm.type == 4) {
						if (this.receiveForm.num <= 0) {
							this.$toast('红包数量不足');
							return;
						}
						uni.showModal({
							title: `兑换${this.receiveForm.num}个红包`,
							content: `确定充值￥${this.detailForm.price * this.receiveForm.num}`,
							success: res => {
								if (res.confirm) {
									this.Addrecharge(this.detailForm.price * this.receiveForm.num, 0, 0, `红包充值${this.receiveForm.fk_receive_id}`, 1).then(order_no => {
										this.useSuccessEnvelop(this.detailForm.type, order_no, this.receiveForm.fk_receive_id, this.receiveForm.num, '余额充值成功');
									});
								}
							}
						});
					}
				}
			});
		},
		// 领取红包
		goReceive() {
			this.$loading();
			this.$resPost('AddRedEnvelopesReceive', {
				envelopes_id: this.detailForm.envelopes_id, // 红包id
				mode: 2,
				num: this.detailForm.inventory_quantity > this.detailForm.relay_num ? this.detailForm.relay_num : this.detailForm.inventory_quantity,
				fk_record_id: this.recordId,
				fk_receive_id: this.detailForm.pk_id // 发红包的用户的领取id
			}).then(() => {
				this.pageInit(true);
			});
		},
		// 使用红包、跳转我的红包列表
		optionEnve() {
			if (this.isShare) {
				this.$linkTo(`/package/redEnvelopes/index`);
				this.envelopeVisible = false;
			} else if (this.receiveForm.num > 0) {
				if (this.detailForm.type == 1) {
					let specActItem = this.prodForm.product_stock[0];
					this.orderProdObj = {
						product_img: this.prodForm.logo,
						express_num: this.prodForm.express_num, // 多少起免邮费
						express_price: this.prodForm.express_price, // 快递费用
						product_freight: this.prodForm.product_freight || [], // 运费模板
						num: this.receiveForm.num,
						price: specActItem.amount,
						product_id: this.prodForm.pk_id,
						product_name: this.prodForm.name,
						fk_attr_id: specActItem.pk_id, // 属性库存id
						standard: specActItem.name, // 属性库存名称
						amount: this.detailForm.amount
					};
					this.$linkTo(`/package/product/redEnvelope/order?receiveId=${this.receiveForm.fk_receive_id}&envelopeId=${this.detailForm.envelopes_id}`);
				} else if (this.detailForm.type == 2) {
					// 优惠券领取
					this.receiveCoupon(this.couponForm, this.receiveForm.fk_receive_id);
				}
				this.envelopeVisible = false;
			}
		},
		seeReceiveList() {
			this.receiveVisible = true;
			if(!this.dataList[0]){
				this.initReceiveList();
			}
		},
		goBack() {
			this.$linkTo('index');
		}
	}
};
</script>

<style scoped lang="scss">
// .rob_box {
// 	display: flex;
// 	align-items: center;
// 	justify-content: center;
// 	.img_view {
// 		width: 100rpx;
// 		height: 100rpx;
// 		background-color: #f5f5f5;
// 		border-radius: 50%;
// 		overflow: hidden;
// 	}
// 	.rob_btn {
// 		text-align: center;
// 		padding: 0 80rpx;
// 		line-height: 100rpx;
// 		margin-top: 100rpx;
// 		background-color: #18b566;
// 		border-radius: 20rpx;
// 		overflow: hidden;
// 	}
// }
// .username {
// 	text-align: center;
// }
// .btn {
// 	background-color: #f05b29;
// 	padding: 16rpx 0;
// 	text-align: center;
// }
/////////////////////////
.page_bg {
	padding-bottom: 159.7%;
	position: relative;
	.bg_img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.qiang_img {
		position: absolute;
		top: 452rpx;
		left: 0;
		width: 100%;
	}
	.post_cont {
		position: absolute;
		bottom: 130rpx;
		text-align: center;
		color: #fff;
		font-weight: bold;
		font-size: 36rpx;
		width: 100%;
		.tip {
			margin-top: 20rpx;
		}
	}
}
.option_main {
	margin-top: -56rpx;
	text-align: center;
	position: relative;
	z-index: 10;
	.btn {
		margin: 0 auto;
		line-height: 92rpx;
		width: 342rpx;
		background: linear-gradient(180deg, #ffe65c, #fff6c0);
		box-shadow: 0rpx 2rpx 18rpx 0px rgba(137, 0, 23, 0.61), 0rpx 4rpx 10rpx 0rpx #ffffff;
		border-radius: 100rpx;
		font-size: 44rpx;
		color: #ff0140;
		font-family: Alibaba PuHuiTi;
	}
	.record_tip {
		font-size: 30rpx;
		text-decoration: underline;
		color: #ff0140;
		margin: 40rpx 0;
	}
}
.record_main {
	padding: 0 20rpx;
	.rece_head {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		.head_title {
			background-color: #f9f9f9;
			padding: 0 40rpx;
			border-radius: 22rpx;
			font-size: 24rpx;
			color: #5a5253;
		}
	}
	.no_record {
		color: #999;
		text-align: center;
		padding: 30rpx 0;
	}
	.scroll_view {
		max-height: 800rpx;
		.rece_item {
			background-color: #f9f9f9;
			border-radius: 18rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.img {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}
			.rece_cont {
				flex: 1;
				overflow: hidden;
			}
			.rece_top {
				display: flex;
				align-items: center;
				.user_name {
					font-weight: bold;
					font-size: 26rpx;
					color: #333;
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.time {
					color: #9f9f9f;
					font-size: 24rpx;
					margin-top: 6rpx;
				}
			}
			.en_name {
				color: #5a5253;
				font-size: 24rpx;
			}
		}
	}
}

.en_bg {
	width: 587rpx;
	height: 572rpx;
	position: relative;
	.en_bg_img{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.open_top {
		position: absolute;
		left: 100rpx;
		right: 100rpx;
		top: 30rpx;
		.en_title {
			display: flex;
			justify-content: center;
			.title_txt {
				color: #ff444b;
				max-width: 100%;
			}
		}
		.open_prod {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 10rpx;
			display: flex;
			margin-top: 30rpx;
			.prod_img {
				margin-right: 16rpx;
				width: 106rpx;
				height: 106rpx;
			}
			.prod_cont {
				color: #e52e4d;
				.prod_name {
					font-size: 28rpx;
				}
			}
		}
		.open_coupon {
			.price_box {
				color: #f60f0b;
				text-align: center;
				.num {
					font-size: 130rpx;
				}
				.sign {
					font-weight: bold;
					font-size: 50rpx;
					padding-left: 6rpx;
				}
			}
			.condition {
				text-align: center;
				font-weight: bold;
				color: #f60f0b;
			}
		}
	}
	.open_bot {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-bottom: 50rpx;
		.time {
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			line-height: 30rpx;
		}
		.btn {
			margin: 30rpx auto 0;
			border-radius: 60rpx;
			width: 440rpx;
			line-height: 76rpx;
			text-align: center;
			background: linear-gradient(0deg, #fff1ba, #ff9c4a, #fea54e);
			color: #fe4c4d;
			font-size: 38rpx;
		}
	}
}
</style>
